<template>
  <div class="time-select">
    <div class="time-select-main">
      <div class="back-today" @click="backToday">今</div>
      <div class="year-show" @click="monshow = !monshow">
        {{yearShow}}年{{monthShow}}月
        <p :class="[monshow?roateActive:roateFade]"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-jiantou"></use>
            </svg></p>
      </div>
      <transition name="slide-fade">
        <div v-show="monshow" class="month-select">
          <div class="year-select">
            <p class="left" @click="minus"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-jiantou"></use>
            </svg></p>
            <p class="center" :class="[numShake?numShakeActive:numShakeFade]" ref="yearcenter">{{yearChange}}</p>
            <p class="right" @click="add"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-jiantou"></use>
            </svg></p>
          </div>
          <ul>
            <li v-for="(item,index) in monthList" :class="{active:index===monthShow-1}" @click="monthTap(index)" :key="index">
              {{item}}月
            </li>
          </ul>
        </div>
      </transition>
      <div class="week">
        <ul>
          <li>周一</li><li>周二</li><li>周三</li><li>周四</li><li>周五</li><li class="weekend">周六</li><li class="weekend">周日</li>
        </ul>
      </div>
      <div class="swiper-container" id="date-select">
        <div class="swiper-wrapper select-box">
          <!-- It is important to set "left" style prop on every slide -->
          <div class="swiper-slide select-main" :class="[{active:slide === activeList},{activetip:activeTipList.indexOf(slide)!=-1}]"
              v-for="(slide, index) in virtualData.slides"
              :key="index"
              :style="{left: `${virtualData.offset}px`}"
            ><p>{{slide | getLastNum}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import autoPrefix from "@/assets/js/common/autoprefix";
import Swiper from '@/assets/js/common/swiper.esm.bundle'
import '@/assets/css/animate.css'
export default {
  name: 'ArticleGuanZhu',
  data() {
    return {
      lists: '',
      start: '',
      current: '',
      monshow: false,
      yearChange: '',
      yearShow: '',
      monthShow: '',
      swiperTimeSelect: '',
      numShake: false,
      roateActive: 'roate-active',
      roateFade: 'roate-fade',
      numShakeActive: '',
      numShakeFade: 'num-shake-fade',
      monthList: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
      activeList: '',
      activeTipList: [
        '20181005',
        '20181006',
        '201811010',
        '20181112',
        '20181205',
        '20181206',
        '20181207',
        '20181215',
        '20181218',
        '20181219',
        '20191223'
      ],
      slides: (() => {
        let start = Date.parse(new Date('1, 3, 2006'))
        let end = Date.parse(new Date('12, 31, 2030'))
        let perDay = 1000 * 60 * 60 * 24
        let days = []
        for (let i = start / perDay; i < end / perDay; i++) {
          let day = new Date(i * perDay).getDate()
          day = day < 10 ? 0 + '' + day : day
          let month = new Date(i * perDay).getMonth() + 1
          month = month < 10 ? 0 + '' + month : month
          let year = new Date(i * perDay).getFullYear()
          days.push(year + '' + month + '' + day)
        }
        return days
      })(),
      /* eslint-enable */
      // virtual data
      virtualData: {
        slides: []
      }
    }
  },
  components: {},
  computed: {},
  filters: {
    getLastNum: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.slice(6, 8)
    }
  },
  methods: {
    touchSlide() {},
    minus() {
      this.numShake = true
      this.numShakeActive = 'num-shake-active-l'
      setTimeout(() => {
        this.yearChange--
        this.numShake = false
      }, 300)
    },
    add() {
      this.numShake = true
      this.numShakeActive = 'num-shake-active-r'
      setTimeout(() => {
        this.yearChange++
        this.numShake = false
      }, 300)
    },
    monthTap(index) {
      let chosenDate = Date.parse(new Date(index + 1 + ', 15, ' + this.yearChange))
      this.swiperTimeSelect.slideTo((chosenDate - this.start) / 1000 / 60 / 60 / 24)
      this.monshow = false
    },
    backToday() {
      this.swiperTimeSelect.slideTo((this.current - this.start) / 1000 / 60 / 60 / 24)
      this.monshow = false
    },
    getCoupleTime(time) {
      return time < 10 && time > 0 ? 0 + '' + time : time
    }
  },
  mounted() {
    const self = this
    this.current = Date.now()
    let currentMsg = new Date(this.current)
    this.yearChange = currentMsg.getFullYear()
    this.activeList =
      currentMsg.getFullYear() +
      '' +
      this.getCoupleTime(currentMsg.getMonth() + 1) +
      '' +
      this.getCoupleTime(currentMsg.getDate())
    // console.log(this.activeList);
    this.start = Date.parse(new Date('1, 3, 2006'))
    // console.log(this.yearChange);
    this.swiperTimeSelect = new Swiper('#date-select', {
      virtual: {
        slides: self.slides,
        renderExternal(data) {
          // assign virtual slides data
          self.virtualData = data
        }
      },
      slidesPerView: 7,
      slidesPerGroup: 7,
      speed: 500,
      longSwipesRatio: 0.1,
      on: {
        slideChangeTransitionEnd: function() {
          let ts = this.activeIndex * 1000 * 60 * 60 * 24 + self.start
          self.yearShow = new Date(ts).getFullYear()
          self.monthShow = new Date(ts).getMonth() + 1
        }
      }
    })
    this.backToday()
  }
}
</script>
<!-- eslint-disable -->
<style scoped lang="scss">
.time-select {
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
  padding-top: 12px;
  .time-select-main {
    width: 100%;
    border-radius: 9px;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
    background: #66a8da url("../../assets/img/time-select-bg.png") center
      no-repeat;
    background-size: 100%;
    position: relative;
    .back-today {
      position: absolute;
      width: 20px;
      height: 20px;
      right: 12px;
      top: 12px;
      color: #004a80;
      font-size: 12px;
      text-align: center;
      line-height: 23px;
      border-radius: 100px;
      background: rgba($color: #fff, $alpha: 0.4);
    }
    .month-select {
      width: 100%;
      overflow: hidden;
      height: 110px;
      .year-select {
        width: 100%;
        height: 24px;
        line-height: 24px;
        border: 1px solid rgba($color: #fff, $alpha: 0.1);
        border-radius: 6px;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        box-sizing: border-box;
        p {
          display: block;
          float: left;
          &.left {
            width: 10%;
            transform: rotateZ(90deg);
          }
          &.center {
            width: 80%;
          }
          &.right {
            width: 10%;
            transform: rotateZ(270deg);
          }
        }
      }
      ul {
        display: block;
        overflow: hidden;
        li {
          width: 25%;
          color: #fff;
          font-size: 14px;
          padding: 6px;
          box-sizing: border-box;
          float: left;
          opacity: 0.8;
          border-radius: 6px;
          &.active {
            background: rgba($color: #fff, $alpha: 0.4);
            color: #004a80;
          }
        }
      }
    }
    .slide-fade-enter-active,
    .slide-fade-leave-active {
      transition: all 0.3s ease;
    }
    .slide-fade-enter,
    .slide-fade-leave-to {
      height: 0;
      opacity: 0;
    }
    .slide-fade-enter-to,
    .slide-fade-leave {
      height: 110px;
      opacity: 1;
    }
    .year-show {
      width: 100%;
      padding-top: 24px;
      height: 34px;
      line-height: 34px;
      font-size: 14px;
      color: #fff;
      font-weight: bold;
      p {
        font-size: 16px;
        line-height: 16px;
        display: inline-block;
      }
    }
    .week {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-top: 6px;
      ul li {
        width: 14.28%;
        color: #fff;
        font-size: 14px;
        float: left;
      }
      .weekend {
        color: #ffe52d;
      }
    }
  }
}
#date-select {
  width: 100%;
  height: 80px;
  .select-box {
    width: 100%;
    height: 100%;
    .select-main {
      width: 14.28%;
      font-size: 16px;
      color: #fff;
      margin-top: 5px;
      line-height: 50px;
      p {
        width: 24px;
        height: 24px;
        display: inline-block;
        text-align: center;
        line-height: 25px;
        text-indent: 0;
        box-align: border-box;
        border-radius: 200px;
      }
    }
    .active {
      color: #004a80;
      p {
        background: rgba($color: #fff, $alpha: 0.6);
      }
    }
    .activetip {
      color: #fff;
      p {
        background: none;
        border: 1px solid rgba($color: #fff, $alpha: 0.4);
        box-sizing: border-box;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          top: 35px;
          width: 6px;
          display: block;
          height: 6px;
          border-radius: 6px;
          left: 7px;
          opacity: 0.5;
          background: #fff;
        }
      }
    }
  }
}
.roate-active,
.roate-fade,
.num-shake-active-l,
.num-shake-active-r,
.num-shake-fade {
  transition: all 0.3s ease;
}
.roate-active {
  transform: rotateZ(180deg);
}
.roate-fade {
  transform: rotateZ(0deg);
}
.num-shake-active-l {
  transform: translateX(-10px);
  opacity: 0;
}
.num-shake-active-r {
  transform: translateX(10px);
  opacity: 0;
}
.num-shake-fade {
  transform: translateX(0);
  opacity: 1;
}
</style>
